<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>SpringBoot Shiro测试</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
</head>

<body class="gray-bg">
<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name" style="height: 170px;"></h1>
        </div>
        <h2>欢迎使用</h2>
        <div th:else>
            <div id="login-alert2" class="alert alert-danger col-sm-12" style="display: none;"></div>
        </div>
        <form class="m-t" id="login_form" role="form" method="post" th:action="@{/web/user/login}">
            <div class="form-group">
                <input id="login-username" th:value="${username}" name="username" type="text" autocomplete="off"
                       class="form-control" placeholder="用户名" oninvalid="this.setCustomValidity('请输入用户名')"
                       oninput="setCustomValidity('')">
            </div>
            <div class="form-group">
                <input id="login-password" th:value="${password}" name="password" type="password" autocomplete="off"
                       class="form-control" placeholder="密码" oninvalid="this.setCustomValidity('请输入密码')"
                       oninput="setCustomValidity('')">
            </div>
            <h5 id="login-alert"></h5>
            <div class="form-group">
                <!--type="submit"-->
                <button type="button" id="login_btn" class="btn btn-primary block full-width m-b">登 录</button>
            </div>
            <!--<p class="text-muted text-center">-->
            <!--<a href="login.html#"><small>忘记密码了？</small></a> | <a href="#">注册一个新账号</a>-->
            <!--</p>-->
        </form>

    </div>
</div>
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script>
    /*    $(function () {
            var username;
            var password;
            $('#login_btn').click(function () {
                username = $('[name="username"]').val();
                password = $('[name="password"]').val();
                var param = check_param(username, password);
                if (param == true) {
                    $.ajax({
                        method: "POST",
                        url: "/user/login",
                        data: {username: username, password: password}
                    }).done(function (msg) {
                        if (msg.code != 200) {
                            $("#login-alert").attr("class", "alert alert-danger col-sm-12")
                            $('#login-alert').text('用户名或密码错误').show();
                            return false;
                        }
                        //检查无错误提交表单
                        //$("#login_form").submit();
                        return true;
                    });
                }
            });

            $('#login_form').submit(function (e) {
                //preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
                //e.preventDefault();
                username = $('[name="username"]').val();
                password = $('[name="password"]').val();
            });

            function check_param(username, password) {
                if (username == '') {
                    $("#login-alert").attr("class", "alert alert-danger col-sm-12")
                    $('#login-alert').text('请输入用户名').show();
                    return false;
                } else if (password == '') {
                    $("#login-alert").attr("class", "alert alert-danger col-sm-12")
                    $('#login-alert').text('请输入密码').show();
                    return false;
                }
                return true;
            }

        });*/

</script>
</body>
</html>